import React from 'react';
import { connect } from 'react-redux';
import BaseComponent from '../../components/common/baseComponent.js';
// import logoIcon from '../../../assets/images/cq/nav/logo.png';
// import giftIcon from '../../../assets/images/cq/nav/gift.png';

export default function withNav(Component, tabIndex) {
  @connect(() => {
    return {
    };
  })
  class NavWrappedComponent extends BaseComponent {

    goHome = () => {
      this.props.history.push('home');
    }

    goGiftCenter = () => {
      this.props.history.push('giftCenter');
    }

    goUserCenter = () => {
      this.props.history.push('userCenter');
    }

    renderNav = () => {
      const { showNav } = this.props;
      if (!showNav) {
        return null;
      } else {
        return (
          <div className="nav-tab">
            <div className={`tab-cell ${tabIndex === 0 ? 'active' : ''}`} onClick={this.goHome}>
              {/*<img src={logoIcon} alt="" className="icon-logo" />*/}
              <div className="cell-title">加油</div>
            </div>
            {/*<div className="flex-blank" />*/}
            <div className={`tab-cell ${tabIndex === 1 ? 'active' : ''}`} onClick={this.goUserCenter}>
              {/*<img src={giftIcon} alt="" className="icon-gift" />*/}
              <div className="cell-title">我的</div>
            </div>
            {/*<div className={`tab-user-center ${tabIndex === 2 ? 'active' : ''}`} onClick={this.goUserCenter}>个人中心</div>*/}
          </div>
        );
      }
    }

    render() {
      return (
        <div className="nav-cq">
          {this.renderNav()}
          <div className="app-container"><Component {...this.props} /></div>
        </div>
      );
    }
  }
  return NavWrappedComponent;
}

